<template>
  <div class="login-bg">
    <div class="container">
      <div class="row  justify-content-center login">
        <div class="col login-page">

          <div class="login-con">
            <div class="text-center web-title">
              <h1>{{webInfo.siteName}}</h1>
            </div>
            <el-card>
              <div slot="header" class="clearfix">
                <div class="login-div">
                  <i class="icon icon-log-in"></i><span class="login-span"> 欢迎登陆</span>
                </div>
              </div>
              <div>
                <el-form :model="authUser" :rules="rules" ref="login" size="big">
                  <el-form-item prop="userName">
                    <el-input type="text" v-model="authUser.userName" auto-complete="off"
                              prefixIcon="icon icon-person"
                              placeholder="请输入用户名">
                    </el-input>
                  </el-form-item>

                  <el-form-item prop="password">
                    <el-input type="password" v-model="authUser.password" auto-complete="off"
                              prefixIcon="icon icon-locked"
                              placeholder="请输入密码" @keyup.enter.native="login">
                    </el-input>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" style="width: 100%" :loading="loading" @click="login">
                      登陆
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
          </div>

          <div class="text-center copy-info">
            © 2018 技术支持: <a href="https://www.hwlcn.com">www.hwlcn.com</a> QQ:35107793
          </div>
        </div>


      </div>
    </div>
  </div>
</template>

<script>
  import Admin from 'src/service/admin'
  import {mapState} from 'vuex'

  export default {
    name: 'AdminLogin',
    data() {
      return {
        rules: {
          userName: [
            {required: true, message: '请输入用户名称', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入用户密码', trigger: 'blur'}
          ]
        },
        loading: false,
        authUser: {
          userName: '',
          password: '',
          type: 'admin'
        }
      }
    }, computed: {
      ...mapState(['webInfo'])
    },
    methods: {
      login: function () {
        const me = this
        me.loading = true;
        Admin.login(me.authUser).then(function (data) {
            if (data != null && data.code == 0) {
              me.$message.success('登录成功,1秒后跳转!')
              setTimeout(function () {
                window.location.href = '/admin/index.html'
              }, 1000)
            }

            setTimeout(function () {
              me.loading = false;
            }, 1100)
          }
        )
      }
    }
  }
</script>
